<template>
	<view class="order">
		<view class="header">
			<navigator open-type="reLaunch" url="/pages/home/home">
				<image src="../../static/image/fanhui (2).png" mode="widthFix" style="width: 80rpx;"></image>
			</navigator>
			<text>订单详情</text>
		</view>
		<view class="payfor">
			<view class="titleName">{{order.shopName}}</view>
			<view class="box">
				<view class="image">
					<image src="https://i.loli.net/2021/04/10/oquX7NpH4BxcOwe.png" mode="widthFix"
						style="width: 180rpx;"></image>
				</view>
				<view class="center">
					<view class="time">标准洗车-5座洗车</view>
					<view class="price">￥{{order.carservicePrice}}.00</view>
				</view>
			</view>
		</view>
		<view class="coupon">
			<view class="left">
				<view class="title">团购券</view>
				<view class="timer">可使用(1张) | 有效期至2021</view>
			</view>
			<view class="right">
				<navigator url="/pages/home/applyRefund">申请退款</navigator>
			</view>
		</view>
		<view class="code">
			<view class="container">
				<view class="qrimg">
					<view class="qrimg-i">
						<tki-qrcode v-if="ifShow" cid="qrcode" ref="qrcode" :val="val" :size="size" :unit="unit"
							:icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake"
							:usingComponents="true" @result="qrR" />
					</view>
				</view>
			</view>
			<view>券码：{{order.carserviceOrderNo}}</view>
			<view style="font-size: 24rpx;">为保障您的权益，未到店铺请不要将券号提供给商家</view>
		</view>
		<view class="useStore common">
			<text class="use">适用门店</text>
			<view class="storeName">{{order.shopName}}</view>
			<view class="address">
				<view class="">{{order.shopAddress}}</view>
				<view>
					<image src="https://z3.ax1x.com/2021/04/19/cTA0T1.png" mode="widthFix" style="width: 60rpx;">
					</image>
				</view>
			</view>
		</view>
		<view class="orderInfomation common">
			<view class="title">订单信息</view>
			<view class="content">订单号: {{order.carserviceOrderNo}}</view>
			<view class="content">购买手机号: {{order.gmtCreate}}</view>
			<view class="content">数量: {{1}}</view>
		</view>
		<view class="footPrice common">
			<view class="title">交易快照</view>
			<view class="title2">团购详情</view>
			<view class="price">
				<view class="title">洗车(5座轿车)</view>
				<view class="priceList">
					<view class="one">
						<text>1份</text>
						<text>{{order.carservicePrice}}.00元</text>
					</view>
					<view class="two">
						<text>总价</text>
						<text>{{order.carservicePrice}}.00元</text>
					</view>
					<view class="three">
						<text>团购价</text>
						<text style="color: #f26200;">{{order.carservicePrice}}.00元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tips common">
			<view>此套餐为新人专享，没人限购一份</view>
			<view>高峰时期需要排队哦~</view>
			<view>任何疑问请联系客服</view>
		</view>
		<view class="reminder">温馨提示</view>
		<view class="data common">
			<view class="title">有效期</view>
			<view>·购买后90天内有效</view>
			<view class="title">除外日期</view>
			<view>·每周日不可用·春节不可用</view>
			<view class="title">规则提醒</view>
			<view>·不再与其他优惠同享</view>
			<view class="title">预约信息</view>
			<view>·无需预约，如遇消费高峰期时段您可能需要排队</view>
			<view class="title">温馨提示</view>
			<view>·如需团购券发票，请您在消费时向商户咨询</view>
		</view>



	</view>
</template>

<script>
	//二维码
	import tkiQrcode from "../../components/tki-qrcode/tki-qrcode.vue";
	//vuex
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers(
		"home"
	);
	export default {
		components: {
			tkiQrcode
		},
		mounted() {},
		data() {
			return {
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' // 二维码生成后的图片地址或base64
			}
		},
		async onLoad(option) {
			console.log(option);
			this.orderDetail()
			// this.getStoreDetail({
			// 	shopId: option.shopId
			// })
		},
		computed: {
			...mapState(["order"])
		},
		methods: {
			...mapActions(["orderDetail"]),
			qrR(res) {
				this.src = res
			}
		}
	}
</script>

<style lang="scss" scoped>
	//
	.common {
		padding: 24rpx;
		margin: 24rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.qrimg {}

	.qrimg-i {
		margin-right: 10px;
	}

	slider {
		width: 100%;
	}

	.order {
		position: relative;
		background-color: #f9f9f9;

		.header {
			height: 340rpx;
			background: linear-gradient(120deg, #fd8839, #fd873c, #fd8846, #fd8c38, #fda548, #fda548, #fd793a, #fd883a);
			color: white;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 40rpx 0;

			text {
				margin-left: 240rpx;
			}
		}

		.payfor {
			width: 660rpx;
			height: 200rpx;
			position: absolute;
			padding: 0 24rpx;
			top: 220rpx;
			left: 0;
			background-color: #FFFFFF;
			margin: 24rpx;
			border-radius: 20rpx;
			box-shadow: -1px 1px 3px 1px rgba(gray, 0.4);

			.box {
				display: flex;

				.center {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
				}
			}

			.titleName {
				font-size: 28rpx;
				padding: 10rpx 0;
			}

			.time {
				font-size: 22rpx;
			}

			.price {
				color: #ff5300;
				font-weight: bold;
			}
		}

		.coupon {
			margin: 24rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 120rpx;
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			.timer {
				font-size: 20rpx;
				color: #333333;
			}
		}

		.code {

			text-align: center;
		}

		.useStore {
			.use {
				font-size: 28rpx;
				font-weight: bold;
			}

			.storeName {
				font-size: 32rpx;
				font-weight: bold;
			}

			.address {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.orderInfomation {
			.title {
				font-size: 22rpx;
				color: #999999;
				border-bottom: 1px solid #cccccc;
				line-height: 90rpx;
			}

			.content {
				padding: 20rpx 0;
				font-size: 22rpx;
			}
		}

		.footPrice {
			.title2 {
				font-size: 22rpx;
				color: #999999;
				border-bottom: 1px solid #cccccc;
				line-height: 90rpx;
			}

			.title {
				font-size: 22rpx;
				color: #999999;
			}

			.price {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.one .two {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
				}

				.three {
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.tips {
			font-size: 22rpx;
			color: #999999;

			view {
				padding: 10rpx 0;
			}
		}

		.reminder {
			padding: 24rpx;
			margin: 24rpx;
			font-size: 22rpx;
			color: #999999;
			border-top: 1px solid #333333;
		}
		.data {
			view {
				font-size: 22rpx;
				color: #999999;
			}
			.title {
				font-size: 28rpx;
				padding: 10rpx 0;
				color: black;
			}
		}
	}
</style>
